<template>
  <div class="container">
    <el-row style="height: 100%">
      <el-col style="height: 100%; padding: 20px 10px" :span="12">
        <div class="left">
          <list-table-new
            v-bind="tableConfig"
            ref="listTable"
            @changeInput="changeInput"
          ></list-table-new>
        </div>
      </el-col>
      <el-col
        style="
          height: 100%;
          border-left: 10px #f2f3f8 solid;
          padding: 20px 10px;
        "
        :span="12"
      >
        <div class="right">
          <detail-table :selectId="selectId"></detail-table>
        </div>
      </el-col>
    </el-row>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      :width="'30%'"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <fieldset>
        <legend>配置分类</legend>
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </fieldset>
    </dialogPublic>
  </div>
</template>

<script>
import detailTable from "./detailTable";
import {
  getConfigList,
  addConfigType,
  updateConfigType,
  deleteConfigType,
} from "@/api/systemManagement/configManagement.js";
export default {
  components: {
    detailTable,
  },
  data() {
    return {
      show: false,
      title: "",
      selectId: "",
      tableConfig: {
        showAllSearch: false,
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        highlightCurrentRow: true,
        searchObj: {
          searchMethod: (params, formData) => {
            if (this.tableConfig.searchObj) {
              this.getTableData(params, formData);
            } else {
            }
          },
          searchArr: [
            {
              type: "select",
              label: "所属分类",
              model: "classifyCode",
              placeholder: "请选择",
              option: this.$store.getters.dirtData("system_config_type"),
            },
            {
              type: "input",
              label: "关键字",
              model: "name",
              placeholder: "请输入字典编码或名称",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            this.selectId = row.id;
          },
        },
        actionList: [
          {
            name: "新增",
            icon: "el-icon-plus",
            method: () => {
              this.addDictionary();
            },
          },
        ],
        column: [
          {
            label: "所属分类",
            textAlign: "center",
            prop: "classifyCode",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_config_type",
                row.classifyCode
              );
            },
          },
          {
            label: "配置编码",
            textAlign: "center",
            prop: "code",
          },
          {
            label: "配置名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                icon: "el-icon-edit",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.editDictionary(row);
                },
              },
              {
                text: "删除",
                icon: "el-icon-delete-solid",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  //this.show = true;
                  this.$confirm("确定要删除这条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.deleteDic(row.id);
                    })
                    .catch(() => {});
                },
              },
            ],
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      formConfig: {
        labelWidth: "60px",
        itemArr: [
          {
            label: "分类",
            prop: "classifyCode",
            type: "select",
            span: 24,
            required: true,
            selectOption: this.$store.getters.dirtData("system_config_type"),
          },
          {
            label: "编码",
            prop: "code",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "名称",
            prop: "name",
            type: "text",
            span: 24,
            required: true,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
    };
  },
  created() {
    //this.getTreeData();
  },
  mounted() {
    this.$refs.listTable.searchData();
  },
  methods: {
    //更改下拉框
    changeInput(model, searchForm) {
      if (model === "classifyCode") {
        this.$refs.listTable.searchData();
      }
    },
    //添加配置项
    addDictionary() {
      this.show = true;
      this.title = "添加配置分类";
      this.editFormData = {};
    },
    //修改配置项
    editDictionary(row) {
      this.show = true;
      this.title = "修改配置分类";
      this.editFormData = row;
    },
    //删除配置项
    deleteDic(id) {
      deleteConfigType({ id: id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.$refs.listTable.searchData();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //表单提交
    async doSubmit() {
      const params = await this.$refs.editForm.getFormData();
      if (this.title == "添加配置分类") {
        addConfigType(params).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.show = false;
              this.$refs.listTable.searchData();
            }
          },
          (error) => {
            this.$message.error(error);
          }
        );
      } else {
        updateConfigType(params).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.show = false;
              this.$refs.listTable.searchData();
            }
          },
          (error) => {
            this.$message.error(error);
          }
        );
      }
    },
    //获取下拉框数据
    getSelectData() {
      dataDictTreeData().then(
        (res) => {
          if (res.code == 200) {
            let arr = res.data.map((item) => {
              const obj = {
                label: item.name,
                value: item.id,
              };
              return obj;
            });
            this.$set(this.tableConfig.searchObj.searchArr[0], "option", arr);
            this.$set(this.formConfig.itemArr[0], "selectOption", arr);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },

    //获取配置项列表
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (queryData.name) {
        queryData.code = queryData.name;
      }
      getConfigList(queryData).then(
        (res) => {
          if (res.code) {
            this.$set(this.tableConfig, "tableData", res.data);
            this.$set(this.tableConfig, "totalNumber", res.total);
            this.selectId = res.data[0].id;
            this.$refs.listTable.setCurrentRow(res.data[0]);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>



<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .left {
    width: 100%;
    height: 100%;
  }
  .right {
    width: 100%;
    height: 100%;
  }
  fieldset {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 10px 30px;
    margin-top: 10px;
  }
  legend {
    margin-left: 30px;
    text-align: left;
  }
}
</style>

